<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="text/javascript">
			function jsCopy(){
				var inputElement = document.getElementById('content');
				var myselect=document.getElementById('fruits');
				var index = myselect.selectedIndex;
				console.log(index);
				var ca = 1;
				if(index == 0){ ca = 2;}else if(index == 1){ca = 3;}else if(index == 2){ ca = 4;}else if(index == 3){ ca = 6;}else if(index == 4){ ca = 7;};
				var inputValue = '<c' + ca  + '>' + inputElement.value + '</c>';		
				console.log(inputValue);
				inputElement.value = inputValue;
			    var e=document.getElementById("content");//对象是content 		
			    e.select(); //选择对象 
			    document.execCommand("Copy"); //执行浏览器复制命令
			   alert("已复制好，可贴粘。"); 
			   inputElement.value = '';
			}; 
		</script>
		<script src="./clipboard.min.js"></script>
		<title>魔域</title>
		<style type="text/css">
		 	html,
			body {
				user-select: none;
				-moz-user-select: none;
				-webkit-user-select: none;
				-webkit-touch-callout: none;
				-webkit-text-size-adjust: none;
				-webkit-tap-highlight-color: transparent;
				-webkit-user-select: none;
			}
			body {
				margin: 0 auto;
				padding: 0 auto;
				/* padding-left: 1rem; */
				/* background-image: url(D01B5A21B665588EDA06C86982730666.jpg); */
				background-size: cover;
				background-position: center;
			}
			input{
				width: 7.25rem;
				height: 3rem;
			}
			#fruits{
				display: inline-block;
				width: 7.25rem;
				height: 3rem;
			}
			button {
				background-color: #ffffff6b;
				margin-top: 1rem;
				width: 7.25rem;
				height: 3.125rem;
				border: 0.0625rem solid red;
				font-size: 1rem;
				font-weight: bold;
			}
			#brr h2{
				display: block;
				position: fixed;
				bottom: 1rem;
				right: 1rem;
				color: red;
			}
			#myParagraph{
				display: none;
				position: fixed;
				width: 80%;
				height: 80%;
				bottom: 10%;
				background-color: #ffc4c4eb;
				left: 10%;
				
				box-shadow: 5px 5px 5px 0px rgba(255, 255, 255, 0.65);
				color: red;
			}
			#myParagraph textarea{
				overflow-y: scroll;
				height: 90%;
				word-wrap: break-word;
				margin: 3%; 
				color: black;
				display: block;
				width: 90%;
				font-size: 2rem;
				padding-left: 0;
				text-align: left;
			}
			#toggleButton{
				display: block;
				position: fixed;
				top: 1rem;
				right: 1rem;
				width: 5.25rem;
				height: 5.25rem;
				background-color: #ffffffd6;
				z-index: 100;
				border-radius: 50%;
				box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
			}
			#wss{
				display: none;
				position: fixed;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 50%)
			}
			
		</style>
	</head>
	<body>
		<audio id="audios" autoplay>
		  <source src="./xiaodf.mp3" type="audio/mpeg">
		</audio>

		<button id="toggleButton">部落公告</button>
		<div id="wss"></div>
		<div id="myParagraph">
			<textarea>
魔城 领域 22级10都总部标签:  #QR8RLURC 
 
逍遥行天下 17级10都分部标签: #9YR028L8 

心上人  14级5都分部标签: #VUYPJURR   第二 

和谐有爱  22级5都 分部标签:#8LGU0G0   新人进这个部落

10级1都黄金1 分部标签:#2PGRJ9ULG

突袭🈲止抢刀抢刀就踢

突袭期间魔城和逍遥🈲止出部落出去就别回来了

🈲止开脚本要援军发现就踢

离线超过三天请出部落

长时间没时间玩就把号放到10级部落存着

进出密码762不输密码一概拒 

🈲止骚扰群里的妹妹违者踢！！

晚上 11点以后🈲止艾特别人

拉人先进群再进部落，进群先群名字改成游戏名字有小号的把小号名字加后面
			</textarea>
		</div>
		<h1>点击部落名称复制</h1>
		<div id="">
			<input id="taokouling" value="#QR8RLURC" type="text" style="color: #077AEC;font-size: 1.4rem;width: 9rem">
			<button id="copyCode" class="btn" data-clipboard-target="#taokouling" data-clipboard-action="copy"
				style="">魔城
				· 领域</button>
		</div>
		<div id="">
			<input id="taokouling1" value="#9YR028L8" type="text" style="color: #077AEC;font-size: 1.4rem;width: 9rem">
			<button id="copyCode1" class="btn1" data-clipboard-target="#taokouling1" data-clipboard-action="copy"
				style="">逍遥行天下</button>
		</div>
		<div id="">
			<input id="taokouling2" value="#8LGU0G0" type="text" style="color: #077AEC;font-size: 1.4rem;width: 9rem">
			<button id="copyCode2" class="btn2" data-clipboard-target="#taokouling2" data-clipboard-action="copy"
				style="">和谐
				· 友爱</button>
		</div>
		<div id="">
			<input id="taokouling6" value="#VUYPJURR" type="text" style="color: #077AEC;font-size: 1.4rem;width: 9rem">
			<button id="copyCode6" class="btn6" data-clipboard-target="#taokouling6" data-clipboard-action="copy"
				style="">心上人</button>
		</div>
		<h1>以下为壳子</h1>
		<div id="">
			<input id="taokouling3" value="#2LCCPJVR8" type="text" style="color: #077AEC;font-size: 1.4rem;width: 9rem">
			<button id="copyCode3" class="btn3" data-clipboard-target="#taokouling3" data-clipboard-action="copy"
				style="c">风雨同舟</button>

		</div>
		<div id="">
			<input id="taokouling4" value="#2Q888PGLC" type="text" style="color: #077AEC;font-size: 1.4rem;width: 9rem">
			<button id="copyCode4" class="btn4" data-clipboard-target="#taokouling4" data-clipboard-action="copy"
				style="">宇雯</button>
		</div>
		<div id="">
			<input id="taokouling5" value="#2QP00Y2LC" type="text" style="color: #077AEC;font-size: 1.4rem;width: 9rem">
			<button id="copyCode5" class="btn5" data-clipboard-target="#taokouling5" data-clipboard-action="copy"
				style="">火行</button>
		</div>
		<div id="">
			<h4>特色文本</h4>
			<input id="content" name="content" placeholder="请输入内容" value="" type="text" style="color: #077AEC;font-size: 1.4rem;width: 9rem">
			<select name="fruits" id="fruits">
			  <option id="cv1" value="red">红色</option>
			  <option id="cv2" value="green">绿色</option>
			  <option id="cv3" value="blue">蓝色</option>
			  <option id="cv4" value="pink">粉色</option>
			  <option id="cv5" value="yellow">黄色</option>
			</select>
			<button id="copyCode7" class="btn7" data-clipboard-target="#taokouling7" data-clipboard-action="copy"
				style=""  onclick="jsCopy()">生成</button>
		</div>
		<div id="brr">
			<h2>暗号762</h2>
		</div>
		<script>
			var clipboard = new Clipboard('.btn');
			clipboard.on('success', function(e) {
				document.getElementById('taokouling').blur();
				alert('复制成功');
			});
			var clipboard1 = new Clipboard('.btn1');
			clipboard1.on('success', function(e) {
				document.getElementById('taokouling1').blur();
				alert('复制成功');
			});
			var clipboard2 = new Clipboard('.btn2');
			clipboard2.on('success', function(e) {
				document.getElementById('taokouling2').blur();
				alert('复制成功');
			});
			var clipboard3 = new Clipboard('.btn3');
			clipboard3.on('success', function(e) {
				document.getElementById('taokouling3').blur();
				alert('复制成功');
			});
			var clipboard4 = new Clipboard('.btn4');
			clipboard4.on('success', function(e) {
				document.getElementById('taokouling4').blur();
				alert('复制成功');
			});
			var clipboard5 = new Clipboard('.btn5');
			clipboard5.on('success', function(e) {
				document.getElementById('taokouling5').blur();
				alert('复制成功');
			});
			var clipboard6 = new Clipboard('.btn6');
			clipboard6.on('success', function(e) {
				document.getElementById('taokouling6').blur();
				alert('复制成功');
			});
			document.getElementById("toggleButton").addEventListener("click", function() {
			  var paragraph = document.getElementById("myParagraph");
			  var wss = document.getElementById("wss");
			  var button = document.getElementById('toggleButton');
			  if (paragraph.style.display === "none") {
			    paragraph.style.display = "block";
			    wss.style.display = "block";
				button.innerHTML = '关闭公告'
			  } else {
			    paragraph.style.display = "none";
			    wss.style.display = "none";
				button.innerHTML = '部落公告'
			  }
			});
		    document.addEventListener('WeixinJSBridgeReady', function() {
				document.getElementById('audios').play()
		    });

		</script>

	</body>
</html>
